<template>
	<view class="assetApply">
		<view class="applyHead">
			<view>
				位置：
			</view>
			<view>
				<picker style="display: inline-block;" @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input">{{array[index]}} ▾</view>
				</picker>
			</view>
			<view>
				<view @click="toClear">清空</view>
				<view @click="openForm">添加</view>
			</view>
		</view>

		<view class="assetList">
			<view v-if="listData.length==0">请添加一条数据</view>
			<view class="assetListItem" v-for="(item,index) in listData">
				<view class="itemHead">
					<view class="itemHeadTitle">{{item.assetName}}</view>
				</view>
				<view class="itemContent">
					<view class="conCenter">
						<view>名称：{{item.assetName}}</view>
						<view>规格型号：{{item.specification}}</view>
						<view>申请数量：{{item.applyQty}}</view>
					</view>
					<view>
						<!-- <text class="iconfont">&#xe8d4;</text> -->
					</view>
				</view>
				<view class="itemHand">
					<view @click="toDel(index)">删除</view>
				</view>
			</view>
		</view>

		<view class="applyMarks">
			<h2>申请说明：</h2>
			<textarea cols="30" rows="10" v-model="allData.remarks"></textarea>
		</view>

		<view class="bottom-btn">
			<view style="padding: 10px;">
				<button class="button btn-green" @click="submitBtn">提交</button>
			</view>
		</view>

		<!-- 底部弹窗 -->
		<uni-popup ref="popupRef" type="bottom">
			<view class="formMain">
				<h2>申请资产</h2>
				<uni-forms ref="formRef" :modelValue="formData" :rules="rules" label-position="top" label-width="100">
					<uni-forms-item label="资产名称" name="assetName">
						<uni-easyinput type="text" v-model="formData.assetName" placeholder="" />
					</uni-forms-item>
					<uni-forms-item label="资产类型" name="assetType">
						<uni-easyinput type="text" v-model="formData.assetType" placeholder="" />
					</uni-forms-item>
					<uni-forms-item label="规格型号" name="specification">
						<uni-easyinput type="text" v-model="formData.specification" placeholder="" />
					</uni-forms-item>
					<uni-forms-item label="申请数量" name="applyQty">
						<uni-easyinput type="text" v-model="formData.applyQty" placeholder="" />
					</uni-forms-item>
				</uni-forms>
				<button @click="submit">提交数据</button>
			</view>
		</uni-popup>
	</view>
	<MessageTip ref="messageTip" :tipContent="tipContent" @clickType="handleShowOrHideTip" />
</template>

<script lang="ts" setup>
	import {
		reactive,
		ref
	} from 'vue'
	import {
		submitApply
	} from '@/common/api/assetAPI.ts'
	import {
		getPosition
	} from '@/common/api/comAPI.ts'
	const tipContent = ref('') //提示信息
	const messageTip = ref()
	const array = ref(['请选择']);
	const currentTab = ref(0)
	const index = ref(0);
	const popupRef = ref();
	const formRef = ref();
	const poss = ref([])
	getPosition().then(value => {
		poss.value = value.data.records
		value.data.records.forEach(item => {
			array.value.push(item.storeName)
		})
	})
	const bindPickerChange = (e) => {
		index.value = e.detail.value
		// value
		try {
			allData.value.applyUnits = poss.value[e.detail.value - 1].id
		} catch (e) {
			//TODO handle the exception
			console.log('没有选位置')
			allData.value.applyUnits = null
		}

	}
	// 显示数据
	const listData = ref([])
	// 表单数据
	const formData = reactive({
		applySort: null,
		assetName: null,
		specification: null,
		applyQty: null,
		assetType: null
	})
	// 全部提交总数据
	const allData = ref({
		applyUnits: null,
		assetApplyType: 1,
		remarks: null,
		dtls: [],
	})
	let xuhao = 1
	// 表单验证
	const rules = {
		assetName: {
			rules: [{
				required: true,
				maxLength: 50,
				errorMessage: '必填且不大于50个字符'
			}]
		},
		specification: {
			rules: [{
				required: true,
				maxLength: 50,
				errorMessage: '必填且不大于50个字符'
			}]
		},
		assetType: {
			rules: [{
				required: true,
				maxLength: 50,
				errorMessage: '必填且不大于50个字符'
			}]
		},
		applyQty: {
			rules: [{
				maxLength: 50,
				required: true,
				errorMessage: '必填且为数字'
			}, {
				format: 'number',
				errorMessage: '请输入数字'
			}]
		}
	}
	// 表单提交
	const submit = () => {
		formRef.value.validate().then(res => {
			listData.value.push({
				applySort: xuhao++,
				assetName: res.assetName,
				specification: res.specification,
				applyQty: res.applyQty,
				assetType: res.assetType
			})
			for (let i in formData) {
				formData[i] = null
			}
			popupRef.value.close()
		}).catch(err => {
			console.log('表单错误信息：', err);
		})
	}
	const openForm = () => {
		if (allData.value.applyUnits == null) {
			uni.showToast({
				title: '请先选择位置',
				icon: 'none'

			});
			return
		}
		popupRef.value.open('center')
	}
	// 删除
	const delIndex = ref()
	const toDel = (index) => {
		delIndex.value = index
		tipContent.value = '确认删除吗？'
		messageTip.value.openTip()
		// uni.showModal({
		// 	content: '确认删除?',
		// 	success: function(res) {
		// 		if (res.confirm) {
		// 			listData.value.splice(index, 1)
		// 		}
		// 	}
		// });
	}
	// 清空
	const toClear = () => {
		tipContent.value='确定清空吗？'
		messageTip.value.openTip()
		// uni.showModal({
		// 	content: '确定清空？',
		// 	success: function(res) {
		// 		console.log(res)
		// 		if (res.confirm) {
		// 			listData.value = []
		// 			xuhao = 0
		// 		}
		// 	}
		// });
	}
	// 提交按钮
	const submitBtn = () => {
		if (listData.value.length != 0) {
			allData.value.dtls = listData.value
			tipContent.value='确认提交申请？'
			messageTip.value.openTip()

		} else {
			uni.showToast({
				icon: 'error',
				title: '我需要一条数据再提交'
			});
		}
	}
	const handleShowOrHideTip = (type: string) => {
		if (type == 'yes') {
			if (tipContent.value == '确认删除吗？') {
				listData.value.splice(index, 1)
			} else if (tipContent.value == '确定清空吗？') {
				listData.value = []
				xuhao = 0
			}else if(tipContent.value == '确认提交申请？'){
				submitApply(allData.value).then(value => {
					if (value.code == 0) {
						uni.showToast({
							title: value.message,
							icon: 'none',
							duration:500
						});
						setTimeout(() => {
							listData.value = []
							allData.value.remarks = null
							uni.navigateBack({
								delta: 1
							})
						}, 500)
				
					} else {
						uni.showToast({
							title: value.message,
							icon: 'none'
						});
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.formMain {
		background-color: #fff;
		padding: 30px;
		margin-top: 80px;
	}

	.formMain>h2 {
		color: #666;
		text-align: center;
		padding-bottom: 30px;
	}

	.applyHead {
		display: flex;
		flex-wrap: row nowrap;
		box-sizing: border-box;
		padding: 15px 15px 0 15px;
		z-index: 10;
	}

	.applyHead>view:nth-child(1) {
		width: 15%;
	}

	.applyHead>view:nth-child(2) {
		width: 35%;
	}

	.applyHead>view:nth-child(3) {
		width: 50%;
		display: flex;
		flex-wrap: row nowrap;
		justify-content: flex-end;
	}

	.applyHead>view:nth-child(3)>view {
		margin-right: 15px;
		font-size: 15px;
		color: #369;
	}

	.table {
		padding: 15px;
	}

	.applyMarks {
		padding: 0 15px 15px 15px;
	}

	.applyMarks h2 {
		color: #666;
	}

	.applyMarks textarea {
		background-color: #eee;
		margin-top: 15px;
		width: 100%;
		max-width: 100%;
	}

	.assetList {
		padding: 10px;
		background-color: #eee;
		margin: 15px 0;
	}

	.itemHead {
		position: relative;
	}

	.assetListItem {
		margin-top: 15px;
		background-color: #fff;
		border-radius: 5px;
	}

	.assetListItem:first-child {
		margin-top: 0;
	}

	.itemHeadTitle {
		text-indent: 15px;
		height: 45px;
		line-height: 45px;
		background-color: aliceblue;
		font-weight: bold;
		color: #333;
	}

	.itemHeadState {
		position: absolute;
		right: 0;
		top: 10px;
		display: inline-block;
		background-color: burlywood;
		font-size: 11px;
		color: #fff;
		padding: 5px 12px;
		border-radius: 15px 0 0 15px;
	}

	.itemContent {
		font-size: 16px;
		box-sizing: border-box;
		padding: 15px 10px;
		border-bottom: 1px solid #eee;
		display: flex;
		flex-wrap: row nowrap;
	}

	.itemContent>view:nth-child(1) {
		width: 85%;
		padding-left: 15px;
		color: #333;
	}

	.itemContent>view:nth-child(1)>view {
		padding: 3px 0;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		cursor: pointer;
	}

	.itemContent>view:nth-child(2) {
		width: 15%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.itemHand {
		padding: 15px;
		display: flex;
		justify-content: flex-end;
	}

	.itemHand>view {
		padding: 4px 23px;
		font-size: 12px;
		border-radius: 5px;
		border: 1px solid #369;
		color: #369;
		margin-right: 8px;
	}
</style>
